<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Fx</title>
		<script src="../../py/system.js" type="text/javascript"></script>
		<script src="../../py/system/dom/element.js" type="text/javascript"></script>
		<script src="../../py/system/fx/base.js" type="text/javascript"></script>
		<script src="../../py/system/fx/animate.js" type="text/javascript"></script>
		
		<script src="../../common/project/project.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/default.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/debug.js" type="text/javascript"></script>
	</head>
	<body> 
		<div style="background: yellow; margin:30px; padding-top: 27px; padding-bottom:30px;" id="a">
				<div style="background: red; width:200px;" id="aa">s<div style="background: black; color:white" id="aba">sadsd</div></div>
				<div style="background: green;" id="ab">f<input type="button" name="button" id="button" value="子控件" /></div>
			</div>
			<hr>
		<script>
			var a = $('a'), aa = $('aa'), aba = $('aba'), ab = $('ab');
			var fns = [
				"Class",
				["Fx.Base", function(){
					var a = Py.Fx.Base.extend({
						set: function(now){
							log(Py.Fx.compute(this.from, this.to, now));
						},
						link: 'wait',
						onStart: function(e){
							log("START   ");
						},
						onComplete: function(){
							log("COMPLETE");
						}
					});
					
					aaa = new a()
						.start(1,2)
						.start(4,3);
				}, null, 8],
				["Fx.Animate", function(){ 
					new Fx.Animate(a).start({}, {
						height: 500
					}).start({}, {
						height: 100
					}).start({}, {
						height: 30
					})
					
				 }],
				 "Fx",
				["Animate(height)", function(){
					a.animate({height: 500}).animate({height: 100}).animate({height: 30});
				}, null, 8],
				["Animate()     多次", function(){
					a.animate({
						height: 10,
						'font-size': 70,
						'opacity': 0.3
					}).animate({
						height: 10,
						'font-size': 20,
						'opacity': 0.6
					}).animate({
						height: 10,
						'font-size': 30,
						'opacity': 0.7
					});
				}, null, 8],
				["Animate(opacity)", function(){
					a.animate({opacity: 0});
				}, null, 8],
				["Animate(scrollTop)", function(){
					a.animate({scrollTop: 400});
				}, null, 8],
				["Animate(background-color)", function(){
					a.animate({'background-color': '#efefef'});
				}, null, 8],
				 
				 "Element",
				 
				 ["Element.prototype.toggle", function(){
					a.toggle(5000, null, 'left');
				}],
				["Element.prototype.highlight", function(){
					aa.highlight();
				}]
			];
			
		</script>
	</body>
</html>